iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
2
自我挑戰組

前端史萊姆與Vue的三十天時光冒險系列 第 19

Day19 閒不下來的史萊姆(二):網站基本資料統整與footer元件實作

  • 分享至 

  • xImage
  •  

本文同步發表於斜槓女紙部落格:Day19 閒不下來的史萊姆(二):網站基本資料統整與footer元件實作

Day19 閒不下來的史萊姆(二):網站基本資料統整與footer元件實作

相信跟我一樣在切版的大家都有跟我同樣的經驗,總是會有那麼幾次要改前人留下來的專案。但是那個程式碼一打開看,心也累了。

然後就完全放棄找前人的規則,用自己知道的方法修改專案,於是乎整個專案變成越來越大包的怪獸。

笑容逐漸消失


在切版最初時就撇開強者自己做網站前台+後台的可能性,大膽假設店家是委外製作網站。如此一來就會牽涉到「店家自行管理後台」的方便性這件事。

趁這這次微調將網站資料全部統整在一個物件內,方便以後整個專案的管理(我自己覺得啦XD)

data物件統整

未調整前的data物件如下

headerSetion: {
    headerImg: {
        bannerBg: '/static/images/bg_01.png',
        siteLogo: '/static/images/logo.svg',
    },
    siteTitle: "I don't want to work",
    logoTxt: '<span>不 想</span> <span>上 班</span>',
}

調整後的data物件如下

siteInfos: {
    siteImgs: {
        bannerBg: "/static/images/bg_01.png",
        siteLogo: "/static/images/logo.svg",
        footerLogo: "/static/images/logo_white.svg",
    },
    siteName: "不 想 │ 上 班",
    siteTitle: "I don't want to work",
    sitePhone: "07-536-0000",
    siteAdd: "香港銅鑼灣興發街1號",
    siteIg: "I_dont_wank_to_work",
}

一日元件化,終身元件化(威

另外也將footer製作成元件的方式,同樣使用Vue.component的做法,只是這次直接將HTML元件寫入Vue.component函式中。其中icon的部分偷懶直接採用Font Awesome

<footer-component :site-phone="siteInfos.sitePhone" :site-logo="siteInfos.siteImgs.footerLogo"
            :site-ig="siteInfos.siteIg" :site-add="siteInfos.siteAdd">
        </footer-component>

如同上面所說,我將所有網站基本資訊統整在new Vuedata屬性中,所以<foot-component>要讀出網站資訊的話,就必須使用props來輔助,JS程式碼如下:

Vue.component("footer-component", {
    props: ['siteLogo', 'sitePhone', 'siteAdd', 'siteIg'],
    template:
        `<div id="footer" class="row justify-content-end">
            <div class="col-12 col-xl-4 d-flex justify-content-end align-items-center p-3 mr-5">
                <div class="f-logo pr-5 mr-5"><img :src="siteLogo" alt="" srcset=""></div>
                <ul>
                    <li><i class="fas fa-phone"></i>{{sitePhone}}</li>
                    <li><i class="fas fa-map-marker-alt"></i>{{siteAdd}}</li>
                    <li><i class="fab fa-instagram"></i>{{siteIg}}</li>
                </ul>
            </div>
        </div>`,
});

到目前為止順利地完成整個網站資料統整以及元件製作的部分,明天我們繼續來聊聊Scroll Down按鈕的實作唷!


上一篇
Day18 閒不下來的史萊姆(一):將房間列表改用x-template 建立元件
下一篇
Day20 寫於開始實作前(1):不用抱大腿也能直接使用Vue製作過場效果及動畫
系列文
前端史萊姆與Vue的三十天時光冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-01-09 08:51:50

逐漸消失/images/emoticon/emoticon02.gif

鍾小呆 iT邦新手 5 級 ‧ 2020-01-09 10:38:46 檢舉

對~~看到之前留下的程式碼怪獸真的都很懷疑人生/images/emoticon/emoticon02.gif

人生嘛 喝啦喝啦喝啦/images/emoticon/emoticon73.gif

我要留言

立即登入留言